<template>
    <div>
        <el-table :data="tableList" stripe>  
            <el-table-column prop="catalog" label="类型"  align="center">
                <template slot-scope="scope">
                    <p v-if="scope.row.catalog == 0">过程线</p>
                    <p v-if="scope.row.catalog == 1">变位图</p>
                </template>
            </el-table-column>
            <el-table-column prop="变位图" label="变位图"  align="center">
                <template slot-scope="scope">
                    <p v-if="scope.row.catalog == 0">{{ scope.row.poinT_NAME }}　{{ scope.row.comp }}</p>
                    <p v-if="scope.row.catalog == 1">{{ scope.row.bwtName  }}</p>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-link type="primary" size="mini" icon="el-icon-edit" @click="handleEditList(scope.row)" :underline="false">修改</el-link>
                    <el-link type="danger" size="mini" icon="el-icon-delete" @click="handleDelList(scope.row.id)" :underline="false" style="margin-left:10px">删除</el-link>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="过程线与变位图关联" :visible.sync="listDialog" width="600px" :before-close="handleCancelList" v-dialogDrag :modal="false">
              <div class="dialog-wrapper">
                <div class="dialog-form">
                    <el-form :model="listForm" label-width="100px" ref="listForm" :rules="formRule">
                      <el-form-item label="变位图" required prop="bwtnaV_ID">
                        <div class="tree-box">
                           <treeMenu :treeData="imageMenuList" name="lable" ref="treeMenu" nodeKey="id" @menuLeftClick="handlePointTreeClickImage"/>
                        </div>
                      </el-form-item>
                  </el-form>
                </div>
            </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="handleCancelList" size="small" icon="el-icon-circle-close">取消</el-button>
            <el-button type="primary" @click="handleSaveList" size="small" icon="el-icon-circle-check">保存</el-button>
          </div>
    </el-dialog>
    </div>
</template>
<script>
import {indexLinkList,GetBWTTree,indexLinkAdd,indexLinkEdit} from '@/api/https'
import treeMenu from './treeMenu.vue'
export default ({
    components:{treeMenu},
    props:{
        indeX_ID:{
            type:Number,
            default:0
        },
        showControl:{
            type:Boolean,
            default:false
        },
        stationId:{
            type:[String,Number],
            default:''
        },
    },
    data() {
        return {
            tableList:[],
            listForm:{},
            listDialog:false,
            editList:false,
            instR_ID:'',
            formRule:{
                bwtnaV_ID: [{required: true, message: '请选择变位图'}],
            },
            imageMenuList:[]
        }  
    },
    mounted(){
        this.handleGetList()
()
    },
    beforeDestroy(){
        this.tableList = []
    },
    methods:{
        handleGetList(){
            indexLinkList({
                INDEX_ID:this.indeX_ID
            }).then(res=>{
                if(res.isSuccess && res.data.length > 0 ){
                    this.tableList = res.data
                }else{
                    this.tableList = []
                }
            })
        },
        handleEditList(data){
            this.listForm = {...data}
            this.listDialog = true
            this.editList = true
            this.handleImageMenu()
        },
        handleCancelList(){
            this.listDialog = false
            this.editList = false
            this.listForm = {
                catalog:1
            }
            this.instR_ID = ''
        },
        handleImageMenu(){
            GetBWTTree({
                StationID:this.stationId,
                CATEGROY:4
            }).then(res=>{
                if(res.isSuccess){
                    this.imageMenuList = res.data
                }else{
                    this.imageMenuList = []
                }
            })
        },
        handlePointTreeClickImage(data){
            const _data = {...this.listForm}
            _data.bwtnaV_ID = data.id
            _data.poinT_NAME = data.treeName
            this.listForm = {..._data}
        },
        handleSaveList(){
            this.$refs['listForm'].validate((valid) => {
                if (valid) {
                    if(this.editList){
                    indexLinkEdit(this.listForm).then(res=>{
                        if(res.isSuccess){
                            this.handleCancelList()
                            this.handleGetList()
                        }else {
                        this.$message.error(res.errorMessage)
                        }
                    })
                }else{
                    const data = {...this.listForm}
                    data.id = 0
                    data.indeX_ID = this.indeX_ID
                    data.url = data.url ? data.url : ''
                    data.comp = data.comp ? data.comp : ''
                    data.codE_ID = data.codE_ID ? data.codE_ID : 0
                    data.instR_ID = data.instR_ID ? data.instR_ID : 0
                    indexLinkAdd(data).then(res=>{
                        if(res.isSuccess){
                            this.handleCancelList()
                            this.handleGetList()
                        }else {
                        this.$message.error(res.errorMessage)
                        }
                    })
                    }
                }else{
                    return false
                }
            })
        },
    }
})
</script>
<style scoped lang="scss">
.dialog-form{
    height: calc(100vh - 400px);
    overflow: auto;
}
</style>
